<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-09-19 13:43:36
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-09-20 14:29:44
 * @FilePath: \eoms-ui\src\views\facturer\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">
        <el-form
            size="mini"
            :inline="true"
            ref="searchForm"
            class="searchForm"
            :model="searchForm"
            label-width="70px"
        >
            <el-form-item label="设备编码">
                <el-input
                    v-model="searchForm.code"
                    clearable
                    placeholder="请输入设备编码"
                />
            </el-form-item>
            <el-form-item label="设备id">
                <el-input
                    v-model="searchForm.id"
                    clearable
                    placeholder="请输入设备id"
                />
            </el-form-item>
            <el-form-item label="厂商" v-if="platformType == 'P'">
                <el-select
                    v-model="searchForm.organizationId"
                    placeholder="请选择厂商"
                    @change="organizeChange"
                    clearable
                >
                    <el-option
                        v-for="item in factuerOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运营商">
                <el-select
                    :disabled="!searchForm.organizationId"
                    v-model="searchForm.operatorId"
                    placeholder="请选择运营商"
                    clearable
                >
                    <el-option
                        v-for="item in operatorOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设备型号">
                <el-select
                    v-model="searchForm.equipModeIds"
                    multiple collapse-tags
                    placeholder="请选择设备型号"
                    clearable
                >
                    <el-option
                        v-for="item in modelOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联网状态">
                <el-select
                    v-model="searchForm.isOnline"
                    placeholder="请选择联网状态"
                    clearable
                >
                    <el-option
                        v-for="item in enums.IS_ONLINE"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="启用状态">
                <el-select
                    v-model="searchForm.isEnable"
                    placeholder="请选择启用状态"
                    clearable
                >
                    <el-option
                        v-for="item in enums.IS_ENABLE"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- <el-form-item label="业务状态">
                <el-select
                    v-model="searchForm.status"
                    placeholder="请选择业务状态"
                    clearable
                >
                    <el-option
                        v-for="item in businessStatus"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item> -->

            <el-form-item label="标签">
                <el-select
                    v-model="searchForm.tagIds"
                    multiple
                    collapse-tags
                    placeholder="请选择标签"
                    clearable
                >
                    <el-option
                        v-for="item in tagsOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址">
                <el-cascader
                    clearable
                    :options="areaSelectData"
                    :props="areaSelectDataProps"
                    ref="areaSelectRef"
                    v-model="searchForm.regionCode"
                    placeholder="请选择地址"
                />
            </el-form-item>

            <el-form-item class="search-btns">
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    @click="doSearch"
                    >搜索</el-button
                >
                <el-button
                    type="default"
                    size="mini"
                    icon="el-icon-refresh"
                    @click="clearData"
                    >重置</el-button
                >
                <el-button
                    type="success"
                    size="mini" v-permission="['equip:maintenance:batchInsertTag']"
                    icon="el-icon-setting"
                    @click="isSetTags"
                    >批量设置标签</el-button
                >
            </el-form-item>
        </el-form>
        <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
            @handleSelect="handleSelect"
        >
            <template slot="codes" slot-scope="scope">
                <div class="codes">
                    <span>{{ scope.row.code }}</span>
                    <DetectOnline
                        :currentRow="scope.row"
                        @updateStatus="fetchData"
                    ></DetectOnline>
                </div>
            </template>
            <template slot="remark" slot-scope="scope">
                <div class="remark-content" @click="isRemarkRow(scope.row)">
                    <el-tooltip placement="left">
                        <div
                            class="remark-div"
                            slot="content"
                            v-html="scope.row.remark"
                            style="
                                white-space: pre-line;
                                max-width: 32vw;
                                max-height: 60vh;
                                overflow-y: auto;
                            "
                        ></div>
                        <span class="remark-text">{{
                            scope.row.remark | htmlToPlainText
                        }}</span>
                    </el-tooltip>
                    <i
                        class="el-icon-edit-outline"
                        v-permission="['equip:maintenance:updateremark']"
                    ></i>
                </div>
            </template>
            <template slot="tags" slot-scope="scope">
                <div class="tags-content">
                    <Tags :closable="true" closePermission="equip:maintenance:deleteTag"
                        :currentRow="scope.row"
                        @updateList="fetchData"
                    ></Tags>
                    <i class="el-icon-circle-plus-outline" @click="tagSetShow(scope.row)" v-permission="['equip:maintenance:insertTag']"></i>
                </div>
            </template>
            <template slot="enableStatus" slot-scope="scope">
                <el-tooltip  placement="left"
                    trigger="hover"
                    :content="`${scope.row.isEnable == 1?'启用':'禁用'}`"
                >
                    <el-switch
                        v-permission="['equip:maintenance:isEnable']"
                        v-model="scope.row.isEnable"
                        :active-value="1"
                        :inactive-value="0"
                        @change="isEnabled($event, scope.row)"
                    >
                    </el-switch>
                </el-tooltip>
            </template>
            <template slot="action" slot-scope="scope">
                <el-button
                    type="primary"
                    size="mini"
                    @click="editDialog(scope.row)"
                    v-permission="['equip:maintenance:update']"
                    >编辑</el-button
                >
                <el-button
                    type="success"
                    class="second-btn"
                    size="mini"
                    @click="logDialog(scope.row)"
                    v-permission="['equip:maintenance:connectionLog']"
                    >连接日志</el-button
                >
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleDelete(scope.row)"
                    v-permission="['equip:maintenance:delete']"
                    >删除</el-button
                >
            </template>
        </Table>
        <pagination
            v-if="total > 0"
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="fetchData"
        />

        <!-- 弹框 -->
        <Dialog
            :visible="visible"
            width="50%"
            :loading="dialogBtnLoading"
            title="编辑设备情况信息"
            @confirmDialog="confirmDialog"
            @cancelDialog="cancelDialog"
        >
            <el-form
                ref="dialogForm"
                :model="dialogForm"
                label-width="80px"
                class="dialogForm"
                size="small"
            >
                <el-form-item label="设备型号" prop="equipModelId">
                    <el-select
                        clearable
                        v-model="dialogForm.equipModelId"
                        placeholder="请选择设备型号"
                    >
                        <el-option
                            v-for="item in modelOption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="厂商" prop="organizationId">
                    <el-select
                        disabled
                        @change="operatorChange"
                        v-model="dialogForm.organizationId"
                        placeholder="请选择厂商"
                    >
                        <el-option
                            v-for="item in factuerOption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="业务状态" prop="status">
                    <el-select
                        v-model="dialogForm.status"
                        clearable
                        placeholder="请选择业务状态"
                    >
                        <el-option
                            v-for="item in businessStatus"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运营商" prop="operatorId">
                    <el-select
                        clearable
                        v-model="dialogForm.operatorId"
                        :disabled="!dialogForm.organizationId"
                        placeholder="请选择运营商"
                    >
                        <el-option
                            v-for="item in dialogOperateOption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" prop="regionCode">
                    <el-cascader
                        clearable
                        style="width: 100%"
                        :options="areaSelectData"
                        :props="{
                            children: 'childrens',
                            value: 'code',
                            label: 'name',
                            emitPath: false,
                        }"
                        v-model="dialogForm.regionCode"
                        placeholder="请选择地址"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input
                        v-model="dialogForm.address"
                        clearable
                        placeholder="请输入详细地址"
                    />
                </el-form-item>
                <el-form-item label="经度" prop="lng">
                    <el-input
                        readonly
                        v-model="dialogForm.lng"
                        placeholder="点击地图自动生成经纬度"
                    />
                </el-form-item>
                <el-form-item label="纬度" prop="lat">
                    <el-input
                        readonly
                        v-model="dialogForm.lat"
                        placeholder="点击地图自动生成经纬度"
                    />
                </el-form-item>
                <el-form-item style="width: 96%; margin-bottom: 0">
                    <!-- <MapBox :dialogForm="dialogForm" ref="map" @click="mapClick"></MapBox> -->
                    <MapBox
                        :dialogForm="dialogForm"
                        ref="map"
                        :visible="visible"
                        @click="mapClick"
                        :isInverseAnalysis="true"
                    ></MapBox>
                </el-form-item>
            </el-form>
        </Dialog>

        <!-- 备注 -->
        <Dialog
            :visible="remarkVisible"
            width="45%"
            title="编辑备注信息"
            :isFooter="false"
            @cancelDialog="remarkVisible = false"
        >
            <Remark
                :currentRow="currentRow"
                @closeRemarkDialog="closeRemarkDialog"
            ></Remark>
        </Dialog>

        <!-- 连接日志 -->
        <Dialog
            :visible="logVisible"
            width="38%"
            :title="`连接日志（${currentRow.code}）`"
            :isFooter="false"
            @cancelDialog="logVisible = false"
        >
            <connectLog :currentRow="currentRow"></connectLog>
        </Dialog>
        <!-- 批量设置标签 -->
        <Dialog
            :visible="tagsVisible"
            width="38%"
            title="批量设置标签（选择标签）"
            @cancelDialog="tagsVisible = false"
            @confirmDialog="tagConfirmDialog"
        >
            <TagsList
                :tagsVisible="tagsVisible"
                @handleTagsSelect="handleTagsSelect"
            ></TagsList>
        </Dialog>

        <!-- 单个设备标签编辑 -->
        <Dialog
            :visible="tagSetVisible"
            width="30%"
            title="设置标签"
            @cancelDialog="tagSetVisible = false"
            @confirmDialog="tagSetConfirmDialog"
        >
        <TagSet :currentRow="currentRow" :tagSetVisible="tagSetVisible" @handleTagSetChange="handleTagSetChange"></TagSet>
        </Dialog>
    </div>
</template>

<script>
import { equipment, operator } from "@/api/factuer";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import Remark from "./components/remark.vue";
import connectLog from "./components/connectLog.vue";
import TagsList from "./components/tagsList.vue";

import MapBox from "@/components/map";
import { removeNullUndefined } from "@/utils/index.js";

import { businessStatus } from "@/utils/config";
import { handleConfirm } from "@/utils/messageBox";
import { mapGetters } from "vuex";

import { GPS } from "@/utils/map/GPS.js";
import DetectOnline from "./components/detectOnline.vue";
import Tags from "./components/tags.vue";
import TagSet from "./components/tagSet.vue";

import operatejs from "./js/operate";
export default {
    mixins:[operatejs],
    components: {
        Pagination,
        Table,
        Dialog,
        MapBox,
        Remark,
        connectLog,
        DetectOnline,
        Tags,
        TagsList,
        TagSet,
    },
    data() {
        return {
            listLoading: true,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 15,
                code: null,
                status: null,
                equipModeIds: [],
                organizationId: null,
                operatorId: null,
                regionCode: null,
                id: null,
                isOnline: null,
                isEnable: null,
                tagIds: [],
            },

            tableHeader: [
                {
                    type: "selection",
                    width: "40",
                    fixed: true,
                },

                {
                    label: "id",
                    prop: "id",
                },
                { slot: "codes", label: "设备编码", width: "220" },
                {
                    label: "厂商",
                    prop: "organizationName",
                    width: "50",
                },
                {
                    label: "运营商",
                    prop: "operatorName",
                    width: "60",
                },
                // {
                //     label: "型号",
                //     prop: "equipModelName",
                //     width: "40",
                // },
                { slot: "enableStatus", label: "状态", width: "80" },
                // {
                //     type: "status",
                //     label: "业务状态",
                //     prop: "pageviews",
                //     width: "50",
                //     formatter: (item) => {
                //         const statusMap = {
                //             1: "已开通",
                //             2: "未交付",
                //             3: "调试中",
                //         };
                //         return {
                //             createStatus: item.status,
                //             value: statusMap[item.status],
                //         };
                //     },
                // },
                {
                    label: "最近上线时间",
                    prop: "lastOnlineTime",
                    width: "80",
                },
                {
                    label: "最近下线时间",
                    prop: "lastOfflineTime",
                    width: "80",
                },
                { slot: "remark", label: "备注", width: "120" },
                { slot: "tags", label: "标签" },
                { slot: "action", label: "操作", width: "240" },
            ],
            tableData: [],
            visible: false, //弹框标识
            dialogForm: {
                equipModelId: null,
                operatorId: null,
                status: null,
                regionCode: null,
                lng: null,
                lat: null,
                address: null,
            },
            dialogRules: {
                equipModelId: [
                    {
                        required: true,
                        message: "请选择设备型号",
                        trigger: "change",
                    },
                ],
                organizationId: [
                    {
                        required: true,
                        message: "请选择厂商",
                        trigger: "change",
                    },
                ],
                operatorId: [
                    {
                        required: true,
                        message: "请选择运营商",
                        trigger: "change",
                    },
                ],
                status: [
                    {
                        required: true,
                        message: "请选择业务状态",
                        trigger: "change",
                    },
                ],
                regionCode: [
                    {
                        required: true,
                        message: "请选择地址",
                        trigger: "change",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入详细地址",
                        trigger: "blur",
                    },
                ],
                lat: [
                    {
                        required: true,
                        message: "请点击地图自动生成纬度",
                        trigger: "blur",
                    },
                ],
                lng: [
                    {
                        required: true,
                        message: "请点击地图自动生成经度",
                        trigger: "blur",
                    },
                ],
            },

            selectVal: "", // select框的绑定值
            selectName: "", // select框显示的name
            treeFilter: "", // 搜索框绑定值，用作过滤

            areaSelectData: [],
            areaSelectDataProps: {
                children: "childrens",
                value: "code",
                label: "name",
                emitPath: false,
            },
            operatorOption: [], //运营商option
            modelOption: [], //设备型号option
            factuerOption: [], //厂商option
            businessStatus: businessStatus,
            dialogBtnLoading: false,
            dialogOperateOption: [],
            platformType: this.$store.state.user.platformType,
            organizationId: this.$store.state.user.organizationId,

            map: null,

            remarkVisible: false,
            currentRow: {}, //当前行
            logVisible: false,
            tagsOption: [],
        };
    },

    computed: {
        ...mapGetters(["enums"]),
    },

    filters: {
        htmlToPlainText(value) {
            // 创建一个临时元素，用于将HTML解析为文本
            if (value) {
                var tempEl = document.createElement("div");
                tempEl.innerHTML = value;
                return tempEl.textContent || tempEl.innerText || "";
            }
            return "";
        },
    },
    created() {
        if (this.platformType != "P") {
            //非平台用户
            this.searchForm.organizationId = this.organizationId;
            this.organizeChange(this.organizationId);
        }

        this.fetchData();
        this.getOperator();
    },

    methods: {
        fetchData(val) {
            this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
            this.listLoading = true;
            equipment(
                "/list",
                "post",
                {
                    ...removeNullUndefined(this.searchForm),
                },
                1
            )
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;

                    this.searchForm.pageNum = +res.pageNum;
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },
        async getOperator() {
            this.modelOption = await this.$store.dispatch(
                "operator/generatorModel"
            );
            this.factuerOption = await this.$store.dispatch(
                "operator/generatorFactuer"
            );
            this.areaSelectData = await this.$store.dispatch(
                "operator/generatorRegion"
            );
            this.tagsOption = await this.$store.dispatch(
                "operator/generatorTags"
            );
        },
        async organizeChange(e) {
            this.operatorOption = [];
            this.searchForm.operatorId = "";
            if (e) {
                let datas = await operator("/all", "get", {
                    organizationId: e,
                });
                this.operatorOption = datas.data;
            }
        },
        async operatorChange(e) {
            this.dialogOperateOption = [];
            this.dialogForm.operatorId = "";
            let datas = await operator("/all", "get", { organizationId: e });
            this.dialogOperateOption = datas.data;
        },
        // 弹框取消
        cancelDialog() {
            this.visible = false;
            // this.resetDialogForm("dialogForm");
            this.dialogForm = {
                equipModelId: null,
                operatorId: null,
                status: null,
                regionCode: null,
                lng: null,
                lat: null,
                address: null,
            };
        },
        // 弹框确认
        confirmDialog() {
            this.submitDialogForm("dialogForm");
        },
        // 编辑
        editDialog(row) {
            this.visible = true;
            this.dialogForm.id = row.id;
            equipment(`/${row.id}`, "get").then((res) => {
                const { data } = res;
                this.dialogForm.operatorId = "";
                this.dialogForm = data;
                // 坐标系转换
                let { lat, lng } = this.dialogForm;
                if (lat && lng) {
                    let gcj = GPS.gcj_encrypt(lat, lng);
                    this.dialogForm.lat = this.toPrecisionSix(gcj.lat);
                    this.dialogForm.lng = this.toPrecisionSix(gcj.lon);
                }

                this.editShow(data.organizationId);
            });
        },
        // 连接日志
        // logDialog(row) {
        //     this.currentRow = { ...row };
        //     this.logVisible = true;
        // },
        async editShow(e) {
            this.dialogOperateOption = [];
            let datas = await operator("/all", "get", {
                organizationId: e,
            });
            this.dialogOperateOption = datas.data;
        },
        submitDialogForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    handleConfirm(
                        `确定要编辑设备情况信息吗？`,
                        "warning",
                        "提示"
                    )
                        .then((res) => {
                            this.doEdit();
                        })
                        .catch((err) => {});
                } else {
                    return false;
                }
            });
        },
        doEdit() {
            this.dialogBtnLoading = true;
            let param = { ...this.dialogForm };
            let {
                address,
                equipModelId,
                id,
                lat,
                lng,
                operatorId,
                organizationId,
                regionCode,
                status,
            } = param;
            let wgs = GPS.gcj_decrypt_exact(lat, lng);
            equipment(
                "/update",
                "post",
                {
                    address,
                    equipModelId,
                    id,
                    lat: this.toPrecisionSix(wgs.lat),
                    lng: this.toPrecisionSix(wgs.lon),
                    operatorId,
                    organizationId,
                    regionCode,
                    status,
                },
                1
            )
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.visible = false;
                        this.fetchData();
                    }
                })
                .finally(() => {
                    this.dialogBtnLoading = false;
                });
        },
        handleDelete(row) {
            handleConfirm("删除后不可恢复，确定继续？", "warning", "提示")
                .then((res) => {
                    this.doDelete(row);
                })
                .catch((err) => {});
        },
        doDelete(row) {
            equipment(`/${row.id}`, "delete").then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.message);
                    this.fetchData();
                }
            });
        },
        resetDialogForm(formName) {
            this.$refs[formName].resetFields();
        },
        /**
         * [mapClick 地图点击事件]
         * @param  {[type]} e [点击携带数据]
         * @return {[type]}   [description]
         */
        mapClick(e) {
            this.dialogForm.lng = this.toPrecisionSix(e.latLng.lng);
            this.dialogForm.lat = this.toPrecisionSix(e.latLng.lat);
            if (e.address) {
                this.dialogForm.address = e.address;
            }
        },

        /**
         * [toPrecisionSix 保留小数点6位数]
         * @param  {[type]} val [数字]
         * @return {[type]}     [description]
         */
        toPrecisionSix(val) {
            return parseInt(val * 1000000) / 1000000;
        },
        clearData() {
            this.searchForm = {
                pageNum: this.searchForm.pageNum,
                pageSize: this.searchForm.pageSize,
                code: null,
                status: null,
                equipModeIds: [],
                organizationId:
                    this.platformType != "P" ? this.organizationId : null,
                operatorId: null,
                regionCode: null,
                id: null,
                isOnline: null,
                isEnable: null,
                tagIds: [],
            };
        },
        doSearch() {
            this.searchForm.pageNum = 1;
            this.fetchData();
        },
        // 是否启用
        isEnabled(e, row) {
            if (e == 1) {
                row.isEnable = 0;
            } else {
                row.isEnable = 1;
            }
            let msg =
                row.isEnable === 1
                    ? `<span style='color:red'>当前操作可能会影响升级任务和参数设置，是否继续操作？</span>`
                    : `<span style='color:red'>请注意当前操作数据中设备code可能存在重复，是否继续操作？</span>`;

            this.$confirm(msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                dangerouslyUseHTMLString: true,
                type: "warning",
            }).then(() => {
                this.doEnabled(row);
            });
        },
        doEnabled(row) {
            equipment(
                `/update/enable/${row.id}?isEnable=${
                    row.isEnable === 1 ? 0 : 1
                }`,
                "post"
            ).then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.message);
                    this.fetchData();
                }
            });
        },

        // isRemarkRow(row) {
        //     this.remarkVisible = true;
        //     this.currentRow = { ...row };
        // },

        // closeRemarkDialog() {
        //     this.remarkVisible = false;
        //     this.fetchData();
        // },
        
        
    },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.dialogForm {
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;

    .el-form-item {
        width: 50%;
    }

    .el-select,
    .el-cascader,
    .el-input {
        width: 90% !important;
    }
}

.codes {
    @include flexLayout(center, center);

    img {
        width: 20px;
        margin-left: 10px;
    }
}
::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
}
.remark-content {
    @include flexLayout(center, center);
    .remark-text {
        @include exceedFlow(1);
    }
    .el-icon-edit-outline {
        color: #5473e8;
        margin-left: 5px;
    }
}
.filters {
    .el-form-item {
        width: 12.5%;
    }
    .search-btns {
        margin-left: 20px;
    }
}
.searchForm {
    .el-form-item {
        margin-bottom: 8px;
    }
    .el-input,
    .el-select {
        width: 140px;
    }
}
.tags-content {
    @include flexLayout(center, center);
    .el-icon-circle-plus-outline {
        cursor: pointer;
        position: relative;
        right: -8px;
        color: #5473e8;
        font-size: 16px;
    }
}
::v-deep .el-select__tags{
    .el-tag:first-child{
        max-width: 62%;
    }
}
</style>
